<!-- 热门推荐 -->
<template>
  <div class="recommend card-margin">
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="re-title">
        <span>热门推荐</span>
      </div>
      <div v-for="item in recommendlist" :key="item" class="text item">
        <el-link :href="item.link" target="_blank" :underline="false">
          <div class="article-title">
            {{ item.title }}
          </div>

          <span class="el-icon-view"> {{ item.like }}</span>
        </el-link>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recommendlist: [
        {
          link: "https://www.baidu.com",
          title: "苹果市值突破2万亿美元；华为推出PC版HMS“擎云生态” ",
          like: 16,
        },
        {
          link: "https://www.baidu.com",
          title:
            "RTSP协议网络摄像头视频平台EasyNVR网页无插件播放，匿名登录不显示设备资源",
          like: 25,
        },
        {
          link: "https://www.baidu.com",
          title: "2020前端学习计划",
          like: 18,
        },
        {
          link: "https://www.baidu.com",
          title: "ES6之回调函数案例",
          like: 20,
        },
      ],
    };
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.card-margin {
  margin: 0 0 15px 20px;
}

.item {
  padding: 8px 0;
}

.recommend {
  width: 400px;
  text-align: left;
}
.box-card .item:hover {
  color: #ff4040;
  cursor: pointer;
}

.box-card span {
  font-weight: bold;
}

.card-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.re-title {
  border-left: 3px solid #f56c6c;
  padding-left: 5px;
  font-size: 18px;
  text-align: left;
}
.el-icon-view {
  color: #aaa;
  float: right;
  text-align: center;
  padding: 3px;
}

.article-title {
  white-space: nowrap;
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
</style>
